.search {
    background-color: white;
    background-color: hsla(0,0%,100%,.95);
    border-bottom: 1px solid darken($lightGrey, 5%);
    box-shadow: 0 .1em .1em hsla(0,0%,0%,.1);
    padding: ($baseline / 2) $baseline;
    @include  background-image(linear-gradient(0deg, hsla(0,0%,100%,0), white));
    z-index: 999;

    @include bp(large) {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        top: 0;
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0);

        // position: sticky polyfill
        &.fixed {
            left: 0;
            position: fixed;
            right: 0;
        }
    }

    input[type="checkbox"] {
        position: relative;
        top: -($baseline / 8);
        vertical-align: middle;
    }

    label {
        cursor: pointer;
        font-size: 1.2em;
        line-height: 2.5;
        margin-right: ($baseline / 1.2);
        padding-left: (($baseline / 1.2) / 4);
    }
}

.search__input {
    background-color: $darkWhite;
    border: 1px solid darken($lightGrey, 25%);
    box-shadow: inset 0 .1em .1em hsla(0,0%,0%,.1);
    color: $black;
    font-size: 1.25em;
    line-height: 1.2;
    margin: 0;
    padding: ($baseline / 3) ($baseline / 2);
    width: 100%;
    vertical-align: baseline;
}